//内容页
import React, { Component } from 'react';
// import axios from "axios"
import"./item.scss"
import { Row, Col, Badge, message  } from 'antd';
import {
    LeftOutlined,HomeOutlined,ShoppingCartOutlined,
} from '@ant-design/icons';
import { Swiper, SwiperSlide } from 'swiper/react';
import SwiperCore, {  Pagination,} from 'swiper';
import 'swiper/swiper.scss';
import 'swiper/components/pagination/pagination.scss';
SwiperCore.use([ Pagination,]);
class Item extends Component {
    constructor(props) {
        super(props);
        this.state = { itemObj:{}, 
        imgList:[],
        count:0
    }
    }
    componentDidMount() {
        console.log(this.props.location.state);
        
        this.setState({itemObj:this.props.location.state},()=>{
           this.jeisuan()
            
        })

    }
    componentWillUnmount(){
        this.setState(()=>{
            return;
        })
    }
    jeisuan=()=>{
        var myCart=JSON.parse(localStorage.getItem("cart"));

            let count=0
            if(myCart!==null&&myCart.length){
                //有数据
                myCart.forEach(item=>{
                    count+=item.num
                       
                }) 
                this.setState({count:count})
            }
    }
    goNext=()=>{
        this.props.history.go(-1)
    }
    addCart=()=>{
        //判断缓存中是否存在数据，如果存在先保存到data中
        var myCart=JSON.parse(localStorage.getItem("cart"));

        //获取商品信息
        var itemObj=this.state.itemObj;
        var data=[];//保存商品数据
        var type=true//true 代表添加 false代表修改
        //判断购物车中是否有数据

        if(myCart!==null&&myCart.length){
            //有数据
            myCart.forEach(item=>{
                if(item.item_id===itemObj.item_id){
                    item.num++;
                    type=false;
                }
                data.push(item);
            })

        }
        if(type){
            //新增
            data.push({
                item_id:itemObj.item_id,
                item_name:itemObj.item_name,
                over_image_url:itemObj.over_image_url,
                min_price:itemObj.min_price,
                num:1
            })

        }
       
        //将数据保存到缓存，localStorage、sessionStorage、cookie 只能保存字符串
        localStorage.setItem("cart",JSON.stringify(data));
        message.config({
            top:200,
            duration:3
        })
        message.success('商品添加成功',()=>{

        })
        this.setState({count:this.state.count+1})
    }
    goCart=()=>{
        this.props.history.push({ pathname: "/cart", state:this.state.itemObj })
    }
    goHome=()=>{
        this.props.history.push("/main")

    }
    render() { 
        const {itemObj,count}=this.state
        return ( 
            <div className="item">
                <div className="item_stop">
                    <Row>
                        <Col span={4}> <LeftOutlined onClick={this.goNext} className="home" /></Col>
                        <Col span={18}>{itemObj.item_name}</Col>
                        <Col span={2}></Col>
                    </Row>
              </div>
              <div>
                <Swiper
                    slidesPerView={1}
                    pagination={{ clickable: true }}
                    onSlideChange={() => console.log('slide change')}
                    onSwiper={(swiper) => console.log(swiper)}
                    >
                    <SwiperSlide><div className="item_pic"><img src={itemObj.over_image_url} alt=""/></div></SwiperSlide>
                    <SwiperSlide><div className="item_pic"><img src={itemObj.over_image_url} alt=""/></div></SwiperSlide>
                    <SwiperSlide><div className="item_pic"><img src={itemObj.over_image_url} alt=""/></div></SwiperSlide>
                    <SwiperSlide><div className="item_pic"><img src={itemObj.over_image_url} alt=""/></div></SwiperSlide>
                </Swiper>
              </div>
              <div className="about">
                  <div>
                    {
                        itemObj.item_long_name
                    }
                  </div>
                  <div>
                      ￥{
                          itemObj.min_app_price/100
                      }
                  </div>
                </div> 
                <div className="icon">
                <HomeOutlined className="home" onClick={this.goHome}/>
                <Badge count={count} className="shop" onClick={this.goCart}>
                    <ShoppingCartOutlined/>
                </Badge>
               
                </div>
                <div className="btn">
                    <div onClick={this.addCart}>加入购物车</div>
                    <div onClick={this.goCart}>立即购买</div>
                </div>

               
            </div>
         
         );
    }
}
 
export default Item;